import React from 'react'
import { Row, Col, Typography, Button, Switch, Input } from 'antd'
import { Dropdown, Space, Divider, Select } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const { Title } = Typography;
const Upload = (props) => {
    const { data = {}, list, onChange, selectIndex, } = props
    const {
        require = false,
        maxLength
    } = data
    const items = [
        {
            label: (
                <Button onClick={() => {
                    onChange({
                        changeType: 'all',
                        list: list.map(item => {
                            return {
                                ...item,
                                require: true
                            }
                        })
                    })
                }} type='link'>全部题目设为必填</Button>
            ),
            key: '0',
        },
        {
            label: (
                <Button onClick={() => {
                    onChange({
                        changeType: 'all',
                        list: list.map(item => {
                            return {
                                ...item,
                                require: false
                            }
                        })
                    })
                }} type='link'>全部题目设为非必填</Button>
            ),
            key: '1',
        },
    ];
    const uploadList = [{
        label: '1张',
        value: '1'
    },
    {
        label: '2张',
        value: '2'
    },

    {
        label: '3张',
        value: '3'
    },
    {
        label: '4张',
        value: '4'
    },
    {
        label: '5张',
        value: '5'
    },
    {
        label: '6张',
        value: '6'
    },
    {
        label: '7张',
        value: '7'
    },
    {
        label: '8张',
        value: '8'
    },
    {
        label: '9张',
        value: '9'
    }]
    return <Row gutter={[24, 24]}>
        <Col span={24}>
            <Title level={4}>全局设置</Title>
        </Col>
        <Col span={24}>
            <Dropdown
                menu={{
                    items,
                }}
            >
                <Button type='link' onClick={(e) => e.preventDefault()}>
                    <Space>
                        全部题目必填设置
                        <DownOutlined />
                    </Space>
                </Button>
            </Dropdown>
        </Col>
        <Col span={24}>
            <Divider></Divider>
        </Col>
        <Col span={24}>
            <Title level={4}>基础设置</Title>
        </Col>
        <Col span={24}>
            此题必填   <Switch onChange={(e) => {
                onChange({
                    data: { require: e },
                    changeType: 'update',
                    index: selectIndex
                })
            }} checked={require}></Switch>
        </Col>
        <Col span={24}>
            <Divider></Divider>
        </Col>
        <Col span={24}>
            <Title level={4}>图片设置</Title>
        </Col>
        <Col span={24}>
            图片数量
        </Col>
        <Col span={24}>
            <Select onChange={(e) => {
                onChange({
                    data: {
                        maxLength: e
                    },
                    changeType: 'update',
                    index: selectIndex
                })
            }} value={maxLength} style={{ width: 180 }} options={uploadList}></Select>
        </Col>
    </Row>
}
export default Upload